<template>
  <!-- 标题卡片模式 -->
  <div class="frosted-glass">
    <uni-forms :modelValue="formData" class="title">
      <uni-forms-item label="手机号" required name="name">
        <view class="card-content">
          <input v-model="formData.phone" placeholder-shown="#333333" class="phoneinput" />
          <verifycode :getCodeQuery="captcha" v-if="!yzm" ref="verifycode" @getCodeQuery="sendyzm"></verifycode>
        </view>
      </uni-forms-item>
      <uni-forms-item label="密码" required name="name" v-if="yzm">
        <view class="card-content">
          <input v-model="formData.password" placeholder-shown="#333333" class="phoneinput" type="password" />
        </view>
      </uni-forms-item>
      <uni-forms-item required label="验证码" v-else>
        <verification-code-style
          borderCheckStyle="border-bottom:1px solid rgb(117, 202, 104);"
          :latticeNum="4"
          @getInputVerification="getInputVerification"
        ></verification-code-style>
      </uni-forms-item>
    </uni-forms>
    <button @click="submitForm" type="primary" class="btn btn-hover">登陆</button>
  </div>
</template>

<script lang="ts">
import verificationCodeStyle from '../../components/passwrold/verificationCodeStyle.vue'
import verifycode from '../../components/passwrold/zhuxichong-getCode.vue'
import { fetchlogin, fetchphone, fetchphonecaptcha } from '../../api/login'
import { useStore } from 'vuex'
import { AppActionTypes } from '@/store/modules/app/action-types'
import { Tips } from '@/utils/util'
import { reactive, ref } from 'vue'
export default {
  components: {
    verificationCodeStyle,
    verifycode,
  },
  setup() {
    let formData = reactive({
      phone: '',
      password: '',
    })
    let captcha = reactive({
      phoneNum: formData.phone,
      codeType: 1,
    })
    const store = useStore()
    const yzm = ref(true)
    const verifycode = ref('')
    const sendyzm = (data: any) => {
      let dataobj = {
        phone: data.phoneNum,
      }
      fetchphone(dataobj).then((res: any) => {
        Tips(res.msg)
      })
    }
    let phonecaptchaobj = {
      phone: captcha.phoneNum,
      captcha: '',
    }
    const getInputVerification = (e) => {
		console.log(e)
	  phonecaptchaobj.phone = formData.phone
      phonecaptchaobj.captcha = e
      console.log(phonecaptchaobj, 'phonecaptchaobj')
    }

    const submitForm = () => {
      console.log(captcha, 'formData')

      if (yzm.value) {
        fetchlogin(formData)
          .then((res) => {
            store.dispatch(AppActionTypes.ACTION_LOGIN, res.token)
            if (res.token) {
              yzm.value = false
				Tips({ title: '请输入验证码 🤾' }, { tab: 1, url: '/pages/login/index' })
				captcha.phoneNum = formData.phone
				phonecaptchaobj.phone = formData.phone
            } else {
				Tips({ title: '请输入正确的手机号和密码 💐' }, { tab: 1, url: '/pages/login/index' })
				formData.password = ''
            }
          })
          .catch((err) => {})
	  } else {
		console.log(formData, 'formData');
		
		  fetchphonecaptcha(phonecaptchaobj).then((res) => {
			  if (res.code == 200) {
				  Tips({ title: '🍀,登陆成功了' }, { tab: 1, url: '/pages/index/index' })
			  } else {
				  Tips({ title: '验证码错误' }, { tab: 1, url: '/pages/login/index' })
			  }
        })
      }
    }

    return {
      formData,
      getInputVerification,
      submitForm,
      yzm,
      verifycode,
      captcha,
      sendyzm,
    }
  },
}
</script>

<style lang="scss" scoped>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-image: url(https://img-baofun.zhhainiao.com/market/133/2366564fa6b83158208eb3181752a8d6_preview.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.frosted-glass {
  width: 55vw;
  height: 32vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  backdrop-filter: blur(10px);
  transition: 0.5s ease;
  flex-direction: column;
  margin-top: 70%;
  padding: 10px;
  .card-content {
    display: flex;
  }
}
.frosted-glass:hover {
  box-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.1), 0 1.7px 2.6px rgba(0, 0, 0, 0.2), 0 3.5px 5.3px rgba(0, 0, 0, 0.3),
    0 7.3px 11px rgba(0, 0, 0, 0.4), 0 20px 30px rgba(0, 0, 0, 0.5);
}

@media (max-width: 768px) {
  .frosted-glass {
    width: 80vw;
  }
}
.phoneinput {
  border-bottom: solid 1px #fff;
  color: rgba(20, 20, 20, 0.5);
  padding-left: 20upx;
}
.btn {
  width: 90%;
  height: 40px;
  background-color: pink;
  border-radius: 20px;
  color: #333;
  border: 0px;
  font-size: 16px;
  margin-top: 20px;
}
.btn-hover {
  position: relative;
  top: 3rpx;
  box-shadow: 0px 0px 8px #999 inset;
}
</style>
